<template>
    <div>
      <div class="search">
        <input class="searchIuput" type="text" placeholder="输入城市名或者拼音">
      </div>
      <!-- <ul class="ul">
        <! <li v-for="item of list" :key="item.id">{{item.name}}</li> -->
      <!-- </ul> -->
    </div>
</template>

<script>
export default {
    name: 'CitySearch',
    props:{
      cities:Object
    },
    data (){
      return{
        // searchContent:'',
        // list:[],
        // timer:null
      }
    },
    // watch: {
      
    //   searchContent(){
    //     if(this.timer){
    //       clearTimeout(this.timer)
    //     }
    //      this.timer=setTimeout(()=>{
    //        const result= []
    //        for(let i in this.cities){
    //          this.cities[i].forEach((value) => {
    //            if(value.spell.indexOf(this.searchContent)>-1||value.name.indexOf(this.searchContent)>-1 ){
    //            result.push(value)
    //            }
    //          });
    //        }
    //        this.list=result
    //      },1000)
    //   alert(cities)   
    //   }
    // }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/vribles.styl'
    .search
      height .72rem
      background: $bgColor
      padding: .1rem 
      .searchIuput
        height: .62rem
        text-align: center
        line-height: .62rem
        color: #666
        border-radius: .06rem
        width: 100% 
        padding:.3rem
        box-sizing: border-box
    .ul
      z-index:1
      position: absolute
      top:1.7rem
      bottom:0
      right:0
      left: 0
      background: red 
</style>
